Android Material Design：TabLayout的简单使用

什么是TabLayout

TabLayout是Support Design Library库中的一个控件，它是用来进行分组的，同时也可以作为ViewPager的指示器

TabLayout的简单使用

●tab创建

◇xml布局创建

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab1" //设置tab显示的文字
            android:icon="@mipmap/ic_launcher" //设置tab的图片
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab2"
            android:icon="@mipmap/ic_launcher"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="tab3"
            android:icon="@mipmap/ic_launcher"
            android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>

◇Java代码动态创建

tabLayout=findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setText("标签1").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("标签2").setIcon(R.mipmap.ic_launcher));
tabLayout.addTab(tabLayout.newTab().setText("标签3").setIcon(R.mipmap.ic_launcher));

●tab的布局排版

tab的布局排版受两个属性限制app:tabMode【fixed（固定）、scrollable（滚动））】和app:tabGravity（fill（填充）、center（居中））

◇设置app:tabMode=“fixed”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity=”fill”

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

2)app:tabGravity=”center”

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="fixed"
        app:tabGravity="center"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

◇设置app:tabMode=“scrollable”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity=”fill”

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

2)app:tabGravity=”center”

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="center"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

●其他设置

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabIndicatorHeight="5dp" //设置指示线高度，如果想要隐藏指示线可以通过将该属性设置为0dp实现
        app:tabIndicatorColor="@color/colorPrimary" //设置指示线颜色
        app:tabTextColor="@color/colorPrimary" //设置未选中文字颜色
        app:tabSelectedTextColor="@color/colorRed" //设置选中文字颜色
        android:layout_height="wrap_content">

</android.support.design.widget.TabLayout>

●绑定ViewPager

这里tab的Text是通过PagerAdapter的getPageTitle方法获取的

public class TabLayoutSimpleActivity2 extends AppCompatActivity {
    ViewPager viewPager;
    TabLayout tabLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablayout_activitysimple);
        viewPager=findViewById(R.id.vp);
        tabLayout=findViewById(R.id.tablayout);
        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return 5;
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view==object;
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                TextView textView=new TextView(TabLayoutSimpleActivity2.this);
                textView.setTextSize(50);
                textView.setText(position+"");
                container.addView(textView);
                return textView;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View) object);
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return "标签"+position;
            }
        });
        tabLayout.setupWithViewPager(viewPager);
    }
}